<template>
  <div class="userInfoBox">
    <!-- eslint-disable-next-line no-trailing-spaces -->
    <HeadNav :title="'选择填报'"></HeadNav>
    <div class="content">
      <div class="contentTop">
        <div class="contentTop-left">
          <img
            src="../../assets/images/dangkou.png"
            alt=""
            style="width: 34px; height: 34px;">
        </div>
        <div class="contentTop-right">
          <div class="contentTop-right-top">运中食堂第一档口</div>
          <div class="contentTop-right-bottom">2025-01-26 提交清单</div>
        </div>
      </div>
      <div class="contentBottom">
        <van-sidebar
          :active-key="activeKey"
          @change="onChangeSidebar">
          <van-sidebar-item
            v-for="(item, index) in sidebarList"
            :key="index"
            :title="item.cateName" />
        </van-sidebar>
        <div class="sidebar_content">
          <div
            class="goods-box"
            v-for="(item,index) in goodsList"
            :key="index"
            :id="index">
            <div class="goods-title">{{ item.title }}</div>
            <div class="goods-box-bottom">
              <div class="goods-price">￥{{ item.price }}</div>
              <div class="goods-num">
                <van-button
                  icon="minus"
                  type="info"
                  class="minus"
                  @click.stop="jian(index,item.id, item.selectNum )"></van-button>
                <div
                  class="selectnum"
                  @click="showInputNum(item, index)">{{ item.selectNum }}</div>
                <van-button
                  icon="plus"
                  type="primary"
                  class="plus"
                  @click.stop="add(index,item.Id)"></van-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="submitBar">
        <van-button
          icon="cart-o"
          info="5"
          @click="toRecordList"></van-button>
        <div class="allPrice"> ￥795.00 <span style="margin-left: 10px; margin-right: 10px;">| </span> <span
          class="checked"
          @click="toRecordList">点击查看清单</span></div>
        <van-button
          type="primary"
          class="loginBtn"
          @click="onSubmit()">去提交 </van-button>
      </div>
    </div>
    <van-popup
      v-model="showInput"
      round
      @click-overlay="closePopup"
      style="width: 80%;height: 180px;"
      :closeable="true">
      <div class="pop_title">
        请输入数量
      </div>
      <van-field
        v-model="popUpNum"
        :border="true"
        style="width: 80%;height: 34px;margin: 14px auto 16px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 10px;"
      />
      <div
        class="sub_btn"
        @click="confirmFilter">
        确认
      </div>
    </van-popup>
    <van-popup
      v-model="showInput2"
      :closeable="true"
      round
      style="width: 80%;height: 180px;">
      <div class="top_title">你确认提交当前所选清单吗？</div>
      <div
        class="sub_btn"
        @click="submit2">
        确定
      </div>
    </van-popup>
    <van-popup
      v-model="showInput3"
      :closeable="true"
      position="bottom"
      style="width: 100%;height: auto">
      <div style="max-height:80vh;padding: 20px 24px 0;">
        <div class="top_title3">已添加清单</div>
        <div
          class="goods-box goods-box-top"
          v-for="(item,index) in goodsList"
          :key="index"
          :id="index"
          style="padding-left: 0;">
          <div class="goods-title">{{ item.title }}</div>
          <div class="goods-box-bottom">
            <div class="goods-price">￥{{ item.price }}</div>
            <div class="goods-num">
              <van-button
                icon="minus"
                type="info"
                class="minus"
                @click.stop="jian(index,item.id, item.selectNum )"></van-button>
              <div
                class="selectnum"
                @click="showInputNum(item, index)">{{ item.selectNum }}</div>
              <van-button
                icon="plus"
                type="primary"
                class="plus"
                @click.stop="add(index,item.Id)"></van-button>
            </div>
          </div>
        </div>
        <div
          class="submitBar"
          style="position: relative">
          <van-button
            icon="cart-o"
            info="5"
            @click="toRecordList"><img
              src="../../assets/images/cart.png"
              alt=""></van-button>
          <div class="allPrice"> ￥795.00 </div>
          <van-button
            type="primary"
            class="loginBtn"
            @click="onSubmit()">去提交 </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
  /* eslint-disable */
//   import { getApplyCertificationPagePho, getVerifyTypeList } from '@/api/api'
  import { getParams } from '@/common/public'
  import HeadNav from '@/components/HeadNav'
  import { Toast } from 'vant';
//   import moment from 'moment'
//   import { mapState } from 'vuex'
  export default {
    name: 'SelectFillIn',
    components: {
      HeadNav,
    },
    computed: {},
    watch: {
      active (newVal) {
         console.log('newVal', newVal)
        if (newVal === 0) {
          this.params.applyType = null
          this.loading = true
          this.contentData = []
          this.finished = false
          if (!this.finished) {
            this.onLoad(1)
          }
        } else {
          this.params.applyType = newVal
          this.loading = true
          this.contentData = []
          this.finished = false
          if (!this.finished) {
            this.onLoad(1)
          }
        }
      }
    },
    data () {
      return {
        active: 0,
        sidebarList: [
            {
                cateName: '主食',
                goodsList: [

                    {
                        id: '101',
                        title: '新东大鸡排  (件/20公斤)',
                        price: '170.00',
                        selectNum: 0,
                    },
                    {
                        id: '101',
                        title: '鱼丸\虾丸（件/10公斤）',
                        price: '115.00',
                        selectNum: 0,
                    },
                    {
                        id: '101',
                        title: '牛肉（斤）',
                        price: '45',
                        selectNum: 0,
                    },
                    {
                        id: '101',
                        title: '烤肠（件/12公斤）',
                        price: '156.00',
                        selectNum: 0,
                    },
                    {
                        id: '101',
                        title: '大鸡排（10袋）',
                        price: '165.00',
                        selectNum: 0,
                    }
                ],
            },
            {
                cateName: '蔬菜水果',
                goodsList: [

                    {
                        id: '101',
                        title: '新东大鸡排  (件/20公斤)',
                        price: '170.00',
                        selectNum: 0,
                    },
                    {
                        id: '101',
                        title: '鱼丸\虾丸（件/10公斤）',
                        price: '115.00',
                        selectNum: 0,
                    }
                ],
            },
            {
                cateName: '肉类',
                goodsList: [
                    {
                        id: '101',
                        title: '新东大鸡排  (件/20公斤)',
                        price: '170.00',
                        selectNum: 0,
                    },
                    {
                        id: '101',
                        title: '牛肉（斤）',
                        price: '45',
                        selectNum: 0,
                    }
                ],
            },
            {
                cateName: '调味品',
                goodsList: [
                    {
                        id: '101',
                        title: '酸汤料  (件/10袋)',
                        price: '280.00',
                        selectNum: 0,
                    },
                    {
                        id: '101',
                        title: '椒麻料（件/18袋）',
                        price: '200.00',
                        selectNum: 0,
                    },
                    {
                        id: '101',
                        title: '咖喱粉（件/6袋）',
                        price: '850',
                        selectNum: 0,
                    }
                ],
            },
            {
                cateName: '零食饮料',
                goodsList: [
                    {
                        id: '101',
                        title: '可口可乐 (件/1箱)',
                        price: '50.00',
                        selectNum: 0,
                    }
                ],
            },
            { cateName: '其他' },
        ],
    
        activeKey:0,
        goodsList:[],
        goodsNum:undefined,
        showInput: false,
        showInput2: false,
        showInput3: false,
        popUpNum: '',
        curIndex: -1
      }
    },
    mounted () {

    },
    created () {
      this.sidebarList.forEach((item,index)=>{
        console.log(item,index,'ooooo')
        if(this.activeKey==index){
            this.goodsList=item.goodsList
        }
      })
    
    },
    methods: {
 
      onClose () {

      },

      toCheck(){
        this.$router.push({ path: '/selectFillIn' })
      },
        onChangeSidebar(e) {
            this.activeKey = e
            console.log(this.activeKey, e, 'e sideBar')
            this.sidebarList.forEach((item, index) => {
                if (this.activeKey == index) {
                    this.goodsList = item.goodsList
                }
            })
        },
        // 查看清单
        toRecordList () {
          this.showInput3 = true
        },
        // 去tijiao
        onSubmit () {
          this.showInput2 = true
        },
        submit2 () {
          this.showInput2 = false
          Toast('提交成功')
          const item={}
          item.isSubmit=true
          this.$router.push({
            path: '/index',
            query: { item: JSON.stringify(item) }
          })
        },
         //数字+
        add(index, id) {
            let num
            this.sidebarList.forEach((item, val) => {
                if(this.activeKey==val){
                    item.goodsList.forEach((ele,ss)=>{
                        if (index === ss) {
                            num = Number(ele.selectNum)
                            num++
                            ele.selectNum = num
                        }
                        this.goodsNum = num
                    })
                }
                
            })
            console.log(num, this.goodsNum, '++++')
        },

        //数字减
        jian(index, Id, cartNum) {
            let num
            this.sidebarList.forEach((item, val) => {
                if(this.activeKey==val){
                    item.goodsList.forEach((ele,ss)=>{
                        if (index === ss) {
                            if (item.selectNum > 1) {
                                item.selectNum--
                            } else if (item.selectNum <= 1 && item.selectNum >= 0) {
                                Toast('该宝贝数量不能在减少了哟！')
                            }
                        }
                        this.goodsNum = num
                    })
                }
                
            })
            console.log(num, this.goodsNum, '-----')
        },
        // 输入数字
        showInputNum(item, index){
          this.curIndex = index
          this.popUpNum = item.selectNum
          this.showInput = true
          console.log(111, item)
        },// 确认按钮
        confirmFilter () {
          // console.log('确认', this.goodsList[this.curIndex])
          this.goodsList[this.curIndex].selectNum = this.popUpNum
          // console.log(this.goodsList)
          this.showInput = false
        },
        // 关闭弹窗
        closePopup(){
            this.showInput=false
        }
    },
    beforeDestroy () {
      console.log('index')
      window.removeEventListener('scroll', this.onLoad, true)
    },
  }
  </script>
  
  <style lang="less" scoped>
  /* eslint-disable */
span,p{
  padding: 0;
  margin: 0;
}
/deep/.van-tab {
  z-index: 200;
  height: 44px;
  //  background:rgb(216, 143, 143);
}
/deep/.van-tabs__wrap .van-tabs__wrap--scrollable {
  position: fixed;
}
/deep/.van-tab--active {
  /* color: rgb(255, 152, 82); */
}
/deep/.van-tabs__line {
  height: 0.6vw;
  background-color: rgb(255, 152, 82);
}

.content {
  overflow: hidden;
  background-color: #f9f9f9;
}
.contentTop{
  background-color: white;
  padding: 25px 24px;
  margin-top: 42px;
  display: flex;
  align-items: center;
  .contentTop-left{
    width: 54px;
    height: 54px;
    border-radius: 54px;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .contentTop-right{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-left: 16px;
  }
  .contentTop-right-top{
    font-size: 18px;
    text-align: left;
    color: #000000;
    line-height: 18px;
  }
  .contentTop-right-bottom{
    font-size: 16px;
    line-height: 16px;
    text-align: left;
    color: #000000;
    margin-top: 12px;
    height: 100%;
  }
}

.contentBottom{
  background-color: #f9f9f9;
  display: flex;
  

  .sidebar_content{
      width: calc(100% - 80px);
      padding-top: 5px;
      
  }
}
.goods-box{
  background-color: #ffffff;
  padding: 12px;
  margin-bottom: 5px;
  .goods-title{
      font-size:16px;
      line-height: 16px;
      text-align: left;
      color: #000000;
  }
  .goods-box-bottom{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 16px;

      .goods-price{
          font-size:15px;
          line-height: 15px;
          text-align: left;
          color: #999999;
      }
      .goods-num{
          display: flex;
          align-items: center;
          .selectnum{
              font-size: 15px;
              text-align: center;
              color: #999999;
              margin: 0px 6px;
          }
      }
      .plus{
          width: 15px;
          height: 15px;
          background: #047DCB;
          border: none;
      }
      .minus{
          width: 15px;
          height: 15px;
          border:1px solid #047DCB;
      }
      /deep/.van-button--normal {
          color: #ffffff !important;
          padding: 5px;
      }
  }
}

.goods-box-top{
  border-top: 1px solid #e5e5e5
}


/*清浮动*/
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

.clearfix {
  zoom: 1;
}
// 去逛逛
.loginBtn {
  width: 100%;
  height: 45px;
  border: none;
  background: #047DCB;
  border-radius:45px;
}
.tips{
  margin-top: 25px;
  font-size: 14px;
  text-align: right;
  color: #000000;
  line-height: 14px; 
}

// sidebar
::v-deep .van-sidebar{
width:105px !important;
height: 100vh;
background-color: #f9f9f9;
}

// 未选中的样式
::v-deep .van-sidebar-item {
// font-weight: bold;
font-size: 26rpx;
line-height: 26rpx;
text-align: center;
color: #888888;
border: none !important;
}
// 选中的样式
::v-deep .van-sidebar-item--selected{
// font-weight: bolder;
line-height: 32rpx;
font-size:32rpx;
text-align: center;
color: #111111;
}
::v-deep .van-sidebar-item--select::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.10667rem;
    height: 0.42667rem;
    background-color: transparent;
    transform: translateY(-50%);
    content: '';
}
.submitBar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 65px;
  position: fixed;
  bottom: 0px;
  width: calc(100% - 48px);
  margin-left: 24px;
  margin-right: 24px;

  .allPrice{
      font-size: 15px;
      text-align: left;
      color: #000000;
      line-height: 15px;
  }
  .checked{
      font-size: 12px;
      line-height: 12px;
      text-align: left;
      color: #999999;
  }
  .loginBtn{
      width: 88px;
      height: 30px;
      border: none;
      background: #047DCB;
      border-radius:45px;
  }
}

.pop_title {
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #000;
  font-size: 15px;
  text-align: center;
  margin-top: 21px;
}
.sub_btn {
  width: 80%;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 22px;
  color: #fff;
  background: #047DCB;
  margin: 8px auto;
  font-size: 15px;
}

.top_title {
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #000;
  font-size: 15px;
  text-align: center;
  margin-top: 60px;
  margin-bottom: 30px;
}

.top_title3 {
  width: 100%;
  // height: 30px;
  // line-height: 30px;
  color: #000;
  font-size: 15px;
  padding-bottom:24px ;
}
</style>
  
